<template>
    <div class="loadingWrapper" v-if="show">
        <div class="boxcontainer">
            
            <div class="itemsContainer">
                    
                <div class="item">
                </div>
                <div class="item" id="d1">
                </div>
                <div class="item" id="d2">
                </div>
                <div class="item" id="d3">
                </div>
                <div class="item" id="d4">
                </div>
            </div>

            <div class="loadingText">
                {{ text }}
            </div>
            
        </div>
        
        
    </div>
    
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import mitter from '@/util/mitt';
const show = ref(false)
const text = ref()
const showLoading = ()=>{
    show.value = true;
}


onMounted(()=>{
    mitter.on("showLoading",(t)=>{
        if(t == '') t='请稍后';
        text.value = t;
        show.value = true;
    })    

    mitter.on("closeLoading",(t)=>{        
        show.value = false;
    })    
})

defineExpose({showLoading})

</script>
<style lang="less" scoped>
.loadingWrapper{
    position: absolute;
    width: 100%;
    height: 100vh;;
    top:0;
    left:0;
    align-items: center;
    justify-content: center;
    display: flex;


    .boxcontainer
            {
                align-items: center;
                width: 180px;
                height: 120px;
                /* background-color: rgba(0,0,0,.8); */
                background-color: #fff;
                background-color: #000;
                border-radius: 10px;
                border:1px solid #dfdfdf;
                display: -webkit-box;
                display: flex;
                -moz-box-orient: horizontal;
                -webkit-box-orient: horizontal;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                
                flex-direction: column;

                .loadingText{
                    margin-top: 15px;
                }

            
            .itemsContainer{
                display: flex;
                height: 50px;
                align-items: center;
            }
            
            }

            .item
            {
				background-color: rgb(1,77,161);
                background-color:#fff;
                margin: 1px;
                color: #fff;
                padding: 0 3px;
                height: 30px;
                -moz-animation:  go 1s infinite;
                -ms-animation: go 1s infinite;
                -webkit-animation: go 1s infinite;
				border-radius:4px;
                margin-right: 5px;
            }
            @-moz-keyframes go {
                0% {height: 30px;}
                50% {height: 50px;}
                100% {height: 30px;}
            }
            @-ms-keyframes go {
                0% {height: 30px;}
                50% {height: 50px;}
                100% {height: 30px;}
            }
            @-webkit-keyframes go {
                0% {height: 30px;}
                50% {height: 50px;}
                100% {height: 30px;}
            }
            #d1
            {
                -webkit-animation-delay: .2s;
                -moz-animation-delay: .2s;
                -ms-animation-delay: .2s;
            }
            #d2
            {
                -webkit-animation-delay: .4s;
                -moz-animation-delay: .4s;
                -ms-animation-delay: .5s;
            }
            #d3
            {
                -webkit-animation-delay: .6s;
                -moz-animation-delay: .6s;
                -ms-animation-delay: .6s;
            }
            #d4
            {
                -webkit-animation-delay: .8s;
                -moz-animation-delay: .8s;
                -ms-animation-delay: .8s;
            }
}
 
</style>